<template>
	<jk-table border :data="upkeepItemList || []" :show-header="false">
		<vxe-column title="序号" align="center" field="sortNum" :width="50">
			<template slot-scope="scope">
				<span>{{ scope.row.sortNum }}</span>
			</template>
		</vxe-column>
		<vxe-column title="项目名称" align="left" field="upkeepItemName" :width="110" />
		<vxe-column title="保养周期" align="left" field="upkeepTypeName" :width="70">
			<template slot-scope="scope">
				<span>{{ transferCircleUnit(scope.row) }}</span>
			</template>
		</vxe-column>
		<vxe-column title="计划保养时间" align="left" field="planUpkeepTime" :width="140" />
		<vxe-column title="上次保养时间" align="left" field="lastUpkeepTime" :width="140" />
		<vxe-column title="保养情况" align="left" field="remarks" :width="150">
			<template slot-scope="scope">
				<jk-input v-model="scope.row.remarks" size="mini" placeholder="保养情况"></jk-input>
			</template>
		</vxe-column>
		<vxe-column title="保养实际开始时间" align="left" field="realUpkeepStartTime" :width="200">
			<template slot-scope="scope">
				<el-date-picker v-model="scope.row.realUpkeepStartTime" size="mini" clearable type="datetime" style="width: 100%;" value-format="yyyy-MM-dd HH:mm:ss" placeholder="保养实际开始时间" />
			</template>
		</vxe-column>
		<vxe-column title="保养人员" align="left" field="belongDate" :min-width="140">
			<template slot-scope="scope">
				<div class="flex-start-center-wrap">
					<el-tag
						v-for="(empItem, empIndex) in scope.row.empList"
						:key="empIndex"
						:closable="pageType !== 'detail' && scope.row.upkeepState !== 3"
						style="width: calc(100% / 3);"
						:type="empItem.auditState === 1 ? 'success' : 'primary'"
						class="flex-between-center"
						@close="onDeleteEmpBtn(machineIndex, scope.rowIndex, empIndex)"
					>
						<div>
							<span class="el-icon-s-custom item-gap"></span>
							<span>{{ empItem.empName }}</span>
						</div>
					</el-tag>
					<div v-if="scope.row.upkeepState !== 3">
						<el-tag
							v-if="pageType !== 'detail'"
							class="el-icon-plus link-style"
							@click="onAddEmpBtn(machineIndex, scope.rowIndex)"
						></el-tag>
					</div>

				</div>
			</template>
		</vxe-column>
		<vxe-column :visible="pageType !== 'detail'" title="操作" align="center" field="operation" :width="70">
			<template slot-scope="scope">
				<div class="flex-center">
					<jk-button
						:disabled="scope.row.upkeepState === 3"
						size="mini"
						type="danger"
						plain
						icon="el-icon-delete"
						@click="onDeleteUpkeepItemBtn(machineIndex, scope.rowIndex)"
					></jk-button>
				</div>
			</template>
		</vxe-column>
	</jk-table>
</template>
<script>
    import { upkeepOrderItemStateList } from '../../../../../../utils/jk/status-option-list';
    import upkeepMixin from '../../../upkeepItemPlan/upkeep';

    export default {
        mixins: [upkeepMixin],
        props: {
            machineIndex: {
                type: Number,
                default: null
            },
            pageType: {
                type: String,
                default: ''
            },
            upkeepItemList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                upkeepOrderItemStateList: upkeepOrderItemStateList
            };
        },
        methods: {
            onDeleteUpkeepItemBtn(machineIndex, upkeepIndex) {
                this.$emit('on-delete-upkeep-item', machineIndex, upkeepIndex);
            },
            onAddEmpBtn(machineIndex, upkeepIndex) {
                this.$emit('on-add-emp', machineIndex, upkeepIndex);
            },
            onDeleteEmpBtn(machineIndex, upkeepIndex, empIndex) {
                this.$emit('on-delete-emp-item', machineIndex, upkeepIndex, empIndex);
            }
        }
    };
</script>
